<template>
	<view>
			<view class="title">
					<text>群名称和群头像</text>
			</view>
			<view class="name">
				<text>群名称</text>
				<input v-model="name" placeholder="填写群名称(2-10个字)"/>
			</view>
			<view class="divider"></view>
			<view class="avatar-container">
				<text>群头像</text>
				<view class="images">
					<view>
						<image :class="select==0?'image-selected':'image'" @tap="selectAvatar()" :src="upload==''?'http://120.76.229.17/dchat/avatar/group-add.png':upload"></image>
						<image :class="select==1?'image-selected':'image'" @tap="selectIndex(1)" src="http://120.76.229.17/dchat/avatar/group-1.png"></image>
						<image :class="select==2?'image-selected':'image'" @tap="selectIndex(2)" src="http://120.76.229.17/dchat/avatar/group-2.png"></image>
						<image :class="select==3?'image-selected':'image'" @tap="selectIndex(3)" src="http://120.76.229.17/dchat/avatar/group-3.png"></image>
					</view>    
					<view>     
						<image :class="select==4?'image-selected':'image'" @tap="selectIndex(4)" src="http://120.76.229.17/dchat/avatar/group-4.png"></image>
						<image :class="select==5?'image-selected':'image'" @tap="selectIndex(5)" src="http://120.76.229.17/dchat/avatar/group-5.jpg"></image>
						<image :class="select==6?'image-selected':'image'" @tap="selectIndex(6)" src="http://120.76.229.17/dchat/avatar/group-6.png"></image>
						<image :class="select==7?'image-selected':'image'" @tap="selectIndex(7)" src="http://120.76.229.17/dchat/avatar/group-7.png"></image>
					</view>
				</view>
			</view>
			<view class="introduction">
				<textarea v-model="introduction" placeholder="简单介绍一下这个群吧"></textarea>
			</view>
			<view class="divider"></view>
			<view>
				<button @tap="create()" class="btn" :disabled="name==''||name.length>10||select==-1">立即创建</button>
			</view>
	</view>
</template>

<script>
	import URL from '@/api/url.js';
	import { createGroup } from 'api/user';
	import {mapActions} from 'vuex';
	export default {
		data() {
			return {
				name:'',
				upload:'',
				//////////图片需要先放在服务器上面
				avatars:[
					"",
					"http://120.76.229.17/dchat/avatar/group-1.png",
					"http://120.76.229.17/dchat/avatar/group-2.png",
					"http://120.76.229.17/dchat/avatar/group-3.png",
					"http://120.76.229.17/dchat/avatar/group-4.png",
					"http://120.76.229.17/dchat/avatar/group-5.png",
					"http://120.76.229.17/dchat/avatar/group-6.png",
					"http://120.76.229.17/dchat/avatar/group-7.png",
				],
				select:-1,
				introduction:''
			}
		},
		methods: {
			...mapActions(['getGroupList']),
			///头像
			selectAvatar: function() {
				let that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: function(res) {
						that.upload = res.tempFilePaths[0];
						that.select = 0;
					}
				})
			},
			selectIndex(index){
				this.select = index
			},
			async createWithUpload(url){
				//默认头像
				uni.showLoading({
					title: '注册中...'
				})
				const { content: res } = await createGroup({
				  token:this.$store.state.token,
				  name:this.name,
				  avatar:url,
				  introduction:this.introduction
				});
				uni.hideLoading();
				uni.showToast({
					title:'创建成功！',
					icon:'success'
				})
				//重新获取一遍群信息
				this.getGroupList();
				setTimeout(function(){
					uni.navigateBack();
				},1000)
			},
			async create(){
				if(this.select==-1){
					uni.showToast({
						title:'请选择头像！',
						icon:'none'
					})
					return;
				}
				if(this.name.length>10||this.name.length<2){
					uni.showToast({
						title:'群名称2~10个字！',
						icon:'none'
					})
					return;
				}
				if(this.introduction.length>100){
					uni.showToast({
						title:'简介字也太多了吧！',
						icon:'none'
					})
					return;
				}
				uni.hideKeyboard();
				if(this.select == 0){
					///自选头像
					if(this.upload==''){
						uni.showToast({
							title:'请选择图片',
							icon:'none',
							duration:1000
						});
						return;
					}
					uni.showLoading({
						title:'正在上传头像···',
					})
					let that = this;
					uni.uploadFile({
					    url: URL.getImageUrl()+'/upload',
					    filePath: that.upload,
					    name: 'image',
					    formData: {
					    	password:URL.getImagePassword(),
					        image: that.upload
					    },
					    success: response => {
					        let res = JSON.parse(response.data);
					        if (res.code == 200) {
								that.createWithUpload(URL.getImageUrl()+'/images/'+res.content.url);
					        }
					    },
					    fail: err => {
					        uni.hideLoading()
					        console.log('请求失败_______________', err);
					    }
					});
					
					
				}else{
					//默认头像
					uni.showLoading({
						title: '注册中...'
					})
					const { content: res } = await createGroup({
					  token:this.$store.state.token,
					  name:this.name,
					  avatar:this.avatars[this.select],
					  introduction:this.introduction
					});
					uni.hideLoading();
					uni.showToast({
						title:'创建成功！',
						icon:'success'
					})
					//重新获取一遍群信息
					this.getGroupList();
					setTimeout(function(){
						uni.navigateBack();
					},1000)
				}
			}
		}
	}
</script>

<style scoped>
	.introduction{
		margin: 30rpx;
	}
	.introduction textarea{
		width: 100%;
		height: 200rpx;
	}
	.title{
		margin-top: 50rpx;
		margin-left: 30rpx;
	}
	.title text{
		font-size: 50rpx;
		font-weight: 900;
	}
	.name{
		display: flex;
		margin-top: 70rpx;
		margin-left: 30rpx;
	}
	.name text{
		font-size: 40rpx;
	}
	.name input{
		padding-top: 10rpx;
		margin-bottom: 0;
		margin-left: 20rpx;
	}
	.divider{
		margin-top: 20rpx;
		margin-left: 4%;
		margin-right: 6%;
		border-bottom: 3rpx solid gray;
	}
	.avatar-container{
		margin-top: 30rpx;
		margin-left: 30rpx;
	}
	.avatar-container text{
		font-size: 40rpx;
	}
	.images{
		margin-top: 30rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}
	.image{
		margin-right: 35rpx;
		border-radius: 50%;
		width: 130rpx;
		height: 130rpx
	}
	.image-selected{
		margin-right: 35rpx;
		border-radius: 50%;
		width: 105rpx;
		height: 105rpx;
		border: #00aaff solid 15rpx;
	}
	.btn{
		margin-top: 50rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		background-color: #00aaff;
		color: white;
		font-size: large;
	}
</style>